<!DOCTYPE HTML>
<html>
<head>
<title>Ethiopia Family Medecine Assessment</title>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
<link rel="stylesheet" href="jquery-mobile-960.min.css" />
<script src="jquery-1.5.min.js"></script>
<script src="ethiopia.js"></script>
<script src="persistence.js" type="application/javascript"></script>
<script src="persistence.store.sql.js" type="application/javascript"></script>
<script src="persistence.store.websql.js" type="application/javascript"></script>
<script src="jquery.mobile-1.0a4.min.js"></script>
<link rel="stylesheet" href="ethiopia.css" />
</head>

<body>

<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>Demographics</h1>
		<a href="index.html" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
		<div data-inline="true" class="ui-btn-right">
			<a id="newclinical" data-role="button" data-icon="plus" >New clinical</a>
			<a id="newnonclinical" data-role="button"data-icon="plus" >New non clinical</a>
		</div>
	</div><!-- /header -->
	<div data-role="content" data-theme="b" >
		<div><fieldset><a id="newform" data-role="button" data-icon="plus">New demographics form...</a></fieldset></div>
		<br />
		<div id="activitiesview"></div>
	</div>
</div>


</body>


<script>
var renderedDay;
initApp(renderFormsView);

function renderFormsView() {
	if (typeof device  != "undefined"){
		document.addEventListener("backbutton", function(){goToPage("index.html");}, false);
	}
	$("#activitiesview").empty();
	DemographicsForm.all().order("day",false).limit(1).list(function(results){
		if(results[0]){
			var dayToRender;
			dayToRender = results[0].day;
			//var nowDate = new Date();
			//dayToRender = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()-2, 0, 0, 0, 0);
			renderActivitiesViewDay(dayToRender,function(){
				renderedDay=dayToRender;
			});
		} /* else{
			showMessage('No activities in the database, click on "New demographics form" to add...');
			//alert("No activities data");
		} */
	});
}

function renderActivitiesViewDayDivider(dayToRender, callback){
	var str = '<ul id="daytorender-' + dayToRender.getTime() + '"data-role="listview" data-split-theme="d" data-split-icon="delete">';
	// str += '<li data-role="list-divider">'+dayToRender.toDateString()+'</li>';
	str += '</ul>';
	str += '<ul><li data-role="listview"></li></ul>';
	$("#activitiesview").append(str);
	if (callback) callback();
}

function renderActivitiesViewDay(dayToRender, callback) {
	showDefaultMessage();
	DemographicsForm.all().order("day",false).list(function(results){
		renderActivitiesViewDayDivider(dayToRender,function(){

			var placerToRedraw = "#daytorender-" + dayToRender.getTime();
			if(results.length>0){
				for(var i =0;i<results.length;i++){
					var str = '';
					var completeStr;
					var nameStr;
					var dateStr = results[i].creationdate.toDateString() ;
					var formPage = "demographicsform.html";
					var completeStr;

					if (results[i].physicianid != null){
						nameStr = results[i].physicianid;	// results[i].id;
					}else{
						nameStr = "??"
					}					
					completeStr = '<span class="ui-icon-complete-' + results[i].complete;
					if(!results[i].complete) {
						completeStr += '">incomplete</span>';
					}else{
						completeStr += '">_complete_</span>';
					}

					str += '<li id="li-' + results[i].id + '">'
					+ '<a class="ui-activityview" href="'+formPage+'?act=' + results[i].id + '" onclick="showDefaultMessage();" rel="external">'
						+ '<h2 class="ui-grid-b">'
							+ '<div class="ui-block-a ui-grid-left">'  + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#" + nameStr  + '</div>'
							+ '<div class="ui-block-b ui-grid-center">' + dateStr + ' ' + '</div>'
							+ '<div class="ui-block-c ui-grid-right">' + completeStr + ' </div>'
						+ '</h2>'
						+ '<a id="' + results[i].id + '" class="act-remove" data-rel="dialog">remove</a>';
					+ '</a>'
						+'</li> ';

					$(placerToRedraw).append(str);
					// important to re-apply style on the dynamically modified elements
					$(placerToRedraw + " *").page();
				}
			}
			else {
				var str = '<li>No forms for this date...<li>';
				$(placerToRedraw).append(str);
				//$(placerToRedraw + " *").page();
			}

			// important to re-apply style on the dynamically modified elements
			$("#activitiesview *").page();

			hideMessage();
			//$("#message").hide();
			if (callback) callback();
		});
	});
}

$('.act-remove').live('click',function() {
	// removing specific form
	var idToRemove = $(this).attr("id");
	if( confirm("Are you sure you want to delete this form?") ) {
		DemographicsForm.all().filter("id", '=', idToRemove).list(function(results){
			var act=results[0];
			if(act){
				persistence.remove(act);
				console.log('activity removed');

				persistence.flush();

				//remove id
				$("#li-"+idToRemove).remove();
			}
		});
	}
});

var newformpage;
$('#newform').bind('click',function() {
	newDemographics(function(demographics){
		newformpage = "demographicsform.html?act=" + demographics.id;
		setTimeout( "goToPage(newformpage)", 200);
	});
});


/* Functions below required for creating new activities from header buttons */

$('#newclinical').bind('click',function() {
	newClinical(function(activity){
		var str = "activity.html?act=" + activity.id;
		window.location.href = str;
	});
});

$('#newnonclinical').bind('click',function() {
	newNonClinical(function(activity){
		var str = "ncactivity.html?act=" + activity.id;
		window.location.href = str;
	});
});



</script>
</html>